<template>
      <div class="bg_f">
      <div class="wp_head">货物信息</div>
      <table class="good_list">
          <tr class="flex flex-between">
            <th>货物名称</th>
            <th>件数</th>
            <th>重量(KG)</th>
            <th>体积(m³)</th>
            <th>包装</th>
            <th v-if="!type">操作</th>
          </tr>
          <tr v-if="goodList.length>0" v-for="(g,index) in goodList" :key="g.name" class="flex flex-between">
            <td class="ellipsis">
              <p class="ellipsis title">{{g.name}}</p>
              </td>
            <td>{{g.num}}</td>
            <td>{{g.weight}}</td>
            <td>{{g.volume}}</td>
            <td>
              <p class="ellipsis title">
              {{g.packages}}
              </p>
            </td>
            <td v-if="!type" @click="del(index)">删除</td>
          </tr>
          <tr v-if="goodList.length==0">
            <td class="color9">请添加货物</td>
          </tr>
      </table>
       <div class="add_good" v-if="!type">
      <button size='mini' @click="showModal" type="primary" >添加商品</button>
    </div>
    </div>
</template>

<script>
export default {
  props:{
    goodList:Array,
    type:{type:String,default:''}
  },
  methods:{
    del(n){
      this.$emit('delGood',n)
    },
    showModal(){
        this.$store.dispatch("setModal", true);
    },

  }

}
</script>

<style scoped>
.bg_f {
  background-color: #fff;
  padding: 15px;
  margin: 10px 0;
}

.bg_f .wp_head {
  padding-bottom: 10px;
  font-size: 16px;
}
.good_list {
  text-align: center;
  border-collapse:collapse;
  word-wrap:break-word;
  word-break:break-all;
}
.good_list tr td,
.good_list tr th {
  flex: 1;
  text-align: center;
  border: 1px solid #eee;
  height: 35px;;
  line-height: 35px;
}
.good_list tr td{
  font-size: 14px;
}
.good_list tr td p{
  padding: 0 3px;
  width: 95%;
 word-wrap:break-word;
  word-break:break-all;
}
.add_good{
  text-align: center;
  margin-top: 20px;
}
</style>
